<template>
  <Page auto-content-height>
    <!-- <FosoCard :showheader="false" class="!px-0 !pt-0"> -->
    <div class="bg-card mb-4 rounded-lg px-4 pt-6">
      <BaseForm />
    </div>
    <!-- </FosoCard> -->
    <FosoTable
      :tool-bar-button-text="$t('sys.position.addPosition')"
      table-title="职位管理pro"
      table-titlehelp="职位管理帮助"
      @add="addPosition"
    >
      <!-- 状态列 -->
      <template #status="{ row }">
        <StatusColumn :request-api="updatePosition" :row="row" />
      </template>
      <!-- 操作列 -->
      <template #action="{ row }">
        <OperationColumn
          :row="row"
          @delete="DeleteHandle(row)"
          @edit="EditHandle(row)"
        />
      </template>
    </FosoTable>
    <Drawer class="w-[40%]" @refresh="reloadTable" />
  </Page>
</template>

<script lang="ts" setup>
import type { PositionTypeItem } from './type';

import { Page, useVbenDrawer, useVbenForm } from '@vben/common-ui';
import { $t } from '@vben/locales';

import {
  deletePosition,
  getPositionList,
  updatePosition,
} from '#/api/sys/position';
import { OperationColumn } from '#/components/FosoTablePro/index';
import { useFosoTable } from '#/components/FosoTablePro/use-foso-config';
import { useFosoTableConfig } from '#/components/FosoTablePro/use-foso-table';

import ExtraDrawer from './components/drawer.vue';
// 定义表单
const [BaseForm] = useVbenForm({
  // 默认展开
  collapsed: false,
  layout: 'horizontal',
  // 提交函数
  handleSubmit: searchHandle,
  // 是否可展开
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  wrapperClass: 'grid-cols-1 md:grid-cols-3',
  schema: [
    {
      component: 'Input',
      fieldName: 'name',
      label: $t('sys.position.name'),
    },
    {
      component: 'Input',
      fieldName: 'code',
      label: $t('sys.position.code'),
    },
    {
      component: 'InputNumber',
      fieldName: 'sort',
      label: $t('sys.role.sort'),
    },
    {
      component: 'Input',
      fieldName: 'remark',
      label: $t('sys.role.remark'),
    },
  ],
});
// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});
// 使用 useFosoTable hook 生成配置
const { gridOptions } = useFosoTableConfig({
  columns: [
    {
      type: 'checkbox',
      width: 50,
    },
    {
      title: $t('sys.position.name'),
      field: 'name',
      // formatter: ({ cellValue }: any) => $t(`sys.${cellValue}`), // 国际化格式化
    },
    {
      title: $t('sys.position.code'),
      field: 'code',
    },
    {
      title: $t('sys.role.remark'),
      field: 'remark',
    },
    {
      title: $t('sys.department.sort'),
      field: 'sort',
    },
    // 状态
    {
      title: $t('sys.department.status'),
      field: 'status',
      slots: {
        default: 'status',
      },
    },
    // 创建时间
    {
      title: $t('sys.menu.createTime'),
      field: 'createTime',
      width: 180,
      formatter: ['formatDate', 'yyyy-MM-dd'],
    },
    {
      title: $t('sys.menu.operation'),
      width: 200,
      slots: { default: 'action' },
    },
  ],

  requestApi: getPositionList,
});

const { FosoTable, FosoTableApi } = useFosoTable(gridOptions);

/**
 * @author Buke
 * @description 新增职位
 * @returns {void}
 */
const addPosition = (): void => {
  drawerApi.setState({ title: $t('sys.position.addPosition') });
  drawerApi.setData({ type: 'addData' });
  drawerApi.open();
};

/**
 * @author Buke
 * @description 搜索职位
 * @returns {void}
 * @todo 职位查询问题
 */
function searchHandle(values: Record<string, any>): void {
  FosoTableApi.commitProxy('query', values);
}

/**
 * @author Buke
 * @description 编辑职位pro
 * @param {PositionInfo} row - 要编辑的行数据对象，包含职位相关信息。
 * @returns {void}
 */
const EditHandle = (row: PositionTypeItem): void => {
  drawerApi.setState({ title: $t('sys.position.editPosition') });
  drawerApi.setData({ type: 'editData', id: row.id });
  drawerApi.open();
};

// /**
//  * @author Buke
//  * @description 搜索职位
//  * @returns {void}
//  * @todo 职位查询问题
//  */
// const searchHandle = (): void => {
//   FosoTableApi.commitProxy('reload');
// };

/**
 * @author Buke
 * @description 处理表格数据加载完成后的操作，如更新表格数据。
 * @returns {void}
 */
const reloadTable = (): void => {
  FosoTableApi.commitProxy('reload');
  drawerApi.close();
};

/**
 * @author Buke
 * @description 删除职位
 * @param {any} row - 要删除的行数据。
 * @returns {void}
 */
async function DeleteHandle(row: PositionTypeItem): Promise<void> {
  await deletePosition(row.id as number);
  ElMessage.success($t('common.deleteSuccess'));
  FosoTableApi.commitProxy('reload');
}
</script>
